<template>
  <div>
    <ul>
      <li v-for="(v, i) in nav" :key="i">
        <img :src="v.img" alt="" />
        <p>{{ v.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch("demotravel", "/data/list/travel");
  },
  computed: {
    nav() {
      return this.$store.state.travel.nav.slice(0, 6);
    },
  },
};
</script>

<style scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
  font-size: 0.09rem;
  margin-top: 0.2rem;
  font-weight: 700;
}
li {
  display: flex;
  flex-direction: column;
  width: 1.14rem;
  margin-bottom: .1rem;

}
img {
  width: 100%;
  border-radius: 0.06rem;
  margin-bottom: .1rem;
}
</style>